<!--
 * @Author: wangming
 * @Date: 2020-09-07 16:57:20
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-20 10:54:25
 * @Description: 万能页面表单内专用
-->
<template>
  <el-form-item
    :prop="config.modelName || config.key"
    :rules="rules"
    :label-width="
      config.__config.noItem ? '' : config.__config.labelWidth + 'px'
    "
  >
    <template slot="label" v-if="!config.__config.noItem">
      <span :style="vmFormState.cssStyle" :class="vmFormState.labelStyle">
        {{ config.__config.label + (vmFormState.labelSuffix || "") }}</span
      >
      <el-tooltip v-if="config.__config.showExplain" placement="top">
        <div
          slot="content"
          class="explain-content"
          :style="{
            'white-space': 'pre-line',
          }"
        >
          {{ config.__config.explainValue }}
        </div>
        <i class="el-icon-info"></i>
      </el-tooltip>
    </template>
    <component
      :descForm="descForm"
      :disabled="vmFormState.disabled || config.__config.disabled"
      :viewInfo="vmFormState.viewInfo || config.__config.viewInfo"
      :isEdit="false"
      :is="config.tagName"
      :form="form"
      :config="config"
      v-model="form[config.modelName]"
    ></component>
  </el-form-item>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import myformComponents from "../__form/index.js";
const CONFIG_LANG = ["label", "placeholder", "explainValue", "content","alt"];
export default {
  components: { ...myformComponents },
  inject: ["formState", "Events"],
  mixins: [myMixin],
  watch: {
    "$i18n.locale": {
      handler: function () {
        if (!!this.config.__config.i18n && process.env.VUE_APP_USER === "APP") {
          CONFIG_LANG.forEach(this.tranConfigLang);
        }
      },
      immediate: true,
    },
  },
  computed: {
    vmFormState() {
      return this.formState();
    },
    vmEvents() {
      if (!!this.Events) {
        return this.Events();
      }
    },
    rules() {
      const rules = [];
      const requiredMessage =
        this.config.__config.label + this.$t("sys.not_be_null");
      if (this.config.__config.required) {
        if (this.vmFormState.viewInfo || this.config.__config.viewInfo) {
          this.config.__config.required = false;
        }
        rules.push({
          required: this.config.__config.required,
          message: requiredMessage,
          trigger: this.config.trigger || "blur",
        });
      }
      rules.push({
        validator: async (rule, value, callback) => {
          const { max, min } = this.config.__config;
          ///输入值校验
          if (
            (value > max || value < min) &&
            value !== null &&
            max !== null &&
            min !== null
          ) {
            callback(new Error(`输入有效值在${min}至${max}之间`));
            return;
          }
          if (value < min && value !== null && max === null && min) {
            callback(new Error(`输入有效值大于或等于${min}`));
            return;
          }
          if (value > min && value !== null && max && min === null) {
            callback(new Error(`输入有效值小于或等于${max}`));
            return;
          }
          //正则校验
          if (!!this.config.__config.regexps) {
            this.config.__config.regexps.forEach(
              ({ regexp, regexpMessage, regexpMessageI18n }) => {
                if (eval(regexp).test(value)) {
                } else {
                  callback(
                    new Error(this.$t(regexpMessageI18n) || regexpMessage)
                  );
                }
              }
            );
          }
          try {
            //表单校验事件
            await this.runEventName("regexps", { values: value });
          } catch (error) {
            callback(new Error(error));
          }
          callback();
        },
        trigger: this.config.trigger || "blur",
      });
      return rules;
    },
  },

  methods: {
    tranConfigLang(key) {
      let code = this.config.__config?.i18n?.[key];
      if (!!code) {
        this.config.__config[key] = this.$t(code);
      }
    },
    async runEventName(name, value) {
      await this.$nextTick();
      const evList = this.config.__highSetUp.events.find(
        (i) => i.value === name
      )?.children;
      if (!!evList) {
        await this.vmEvents.runEvents(evList, { _this: this, values: value });
      }
    },
    init() {
      //组件初始化
      this.$set(this.form, this.config.modelName, this.config.defaultValue);
    },
  },
  async created() {
    if (
      !!this.config.modelName &&
      this.form[this.config.modelName] === undefined
    ) {
      this.init();
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 12px;
}
::v-deep .el-icon-info {
  margin-left: 10px;
}
.explain-content {
  max-width: 400px;
}
</style>
